@using Akso.Authorization.Roles
<div>
    <form name="roleCreateOrEditForm" role="form" novalidate class="form-validation">
        <div class="modal-header">
            <h4 class="modal-title">
                <span ng-if="vm.role.id">@L("EditRole"): {{vm.role.displayName}}</span>
                <span ng-if="!vm.role.id">@L("CreateNewRole")</span>
            </h4>
        </div>
        <div class="modal-body">
            <uib-tabset class="tab-container tabbable-line">
                <uib-tab heading="@L("RoleProperties")">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input class="form-control" type="text" name="RoleDisplayName" ng-class="{'edited':vm.role.displayName}" ng-model="vm.role.displayName" required maxlength="@Role.MaxDisplayNameLength">
                        <label>@L("RoleName")</label>
                    </div>
                    <div class="md-checkbox-list">
                        <div class="md-checkbox">
                            <input id="EditRole_IsDefault" class="md-check" type="checkbox" name="IsDefault" ng-model="vm.role.isDefault">
                            <label for="EditRole_IsDefault">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                @L("Default")
                            </label>
                            <span class="help-block">@L("DefaultRole_Description")</span>
                        </div>
                    </div>
                </uib-tab>
                <uib-tab heading="@L("Permissions")">
                    <permission-tree edit-data="vm.permissionEditData"></permission-tree>
                </uib-tab>
            </uib-tabset>
        </div>
        <div class="modal-footer">
            <button ng-disabled="vm.saving" type="button" class="btn btn-default" ng-click="vm.cancel()">@L("Cancel")</button>
            <button type="submit" button-busy="vm.saving" busy-text="@L("SavingWithThreeDot")" class="btn btn-primary blue" ng-click="vm.save()" ng-disabled="roleCreateOrEditForm.$invalid"><i class="fa fa-save"></i> <span>@L("Save")</span></button>
        </div>
    </form>
</div>